<template>
  <div class="echarts_box">
    <div
      class="echarts_box"
      ref="echarts_box"
      :style="{ opacity: data.length == 0 ? '0' : '1' }"
    ></div>
    <!---------------------- 无数据时显示 ---------------------->
    <Nodata class="Nodata" v-show="data.length == 0"></Nodata>
  </div>
</template>

<script>
// const elementResizeDetectorMaker = require("element-resize-detector");
export default {
  mounted() {},
  computed: {
    // ...mapGetters(["echartsColor"]),
  },
  watch: {
    data: "drawLine", // 数值变化是更新图表
    color: "drawLine", // 数值变化是更新图表
    title: "drawLine", // 数值变化是更新图表

  },
  props: {
    color: {
      type: String,
      default: "rgba(9,193,253,",
    },
 
    title: {
      // y轴标题
      type: String,
      default: "",
    },
   
 
    data: {
      // 返回的数据
      type: [Number,String],
      default: '0',
    },
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      try {
        this.$nextTick(() => {
          let myChart = this.$echarts.init(this.$refs.echarts_box);

          var option = {
            // backgroundColor: "#050038",
            title: {
              text: this.title,
              subtext: this.data, //副标题文本，'\n'指定换行
              x:'center',
              y:'42%',
              itemGap: 5, //主副标题纵向间隔，单位px，默认为10
              textStyle: {
                fontFamily: "PingFang SC",
                fontSize: 14,
                color: "rgba(255, 255, 255,0.9)",
              },
              subtextStyle: {
  
                fontSize:20,
                fontFamily:"Furore",
                color: "rgba(255, 255, 255,0.9)",
              },
            },
            series: [
              {
                type: "liquidFill",
                radius: "62%",
                center: ["50%", "50%"],
                data: [0.7, 0.7, 0.7], // data个数代表波浪数
                backgroundStyle: {
                  borderWidth: 1,
                  color: "rgb(0,102,255,0.3)",
                },
                label: {
                  show:false,
                  normal: {
                    show:false,
                    // formatter: (0.5 * 100).toFixed(2) + "%",
                    textStyle: {
                      fontSize: 10,
                    },
                  },
                },
                outline: {
                  show: false,
                },
              },
              {
                type: "pie",
                center: ["50%", "50%"],
                radius: ["70%", "72%"],
                hoverAnimation: false,
                data: [
                  {
                    name: "",
                    value: 500,
                    labelLine: {
                      show: false,
                    },
                    itemStyle: {
                      color: "#009CFF",
                    },
                    emphasis: {
                      labelLine: {
                        show: false,
                      },
                      itemStyle: {
                        color: "#009CFF",
                      },
                    },
                  },
                  {
                    //画中间的图标
                    name: "",
                    value: 4,
                    labelLine: {
                      show: false,
                    },
                    itemStyle: {
                      color: "#ffffff",
                      normal: {
                        color: "#5886f0",
                        borderColor: "#009CFF",
                        borderWidth: 4,
                        borderRadius: '50%'
                      },
                    },
                    label: {
                      borderRadius: "100%",
                    },
                    emphasis: {
                      labelLine: {
                        show: false,
                      },
                      itemStyle: {
                        color: "#5886f0",
                      },
                    },
                  },
                  {
                    // 解决圆点过大后续部分显示明显的问题
                    name: "",
                    value: 4.5,
                    labelLine: {
                      show: false,
                    },
                    itemStyle: {
                      color: "#5886f0",
                    },
                    emphasis: {
                      labelLine: {
                        show: false,
                      },
                      itemStyle: {
                        color: "#5886f0",
                      },
                    },
                  },
                  {
                    //画剩余的刻度圆环
                    name: "",
                    value: 100,
                    itemStyle: {
                      color: "rgba(0,0,0,0)",
                    },
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    emphasis: {
                      labelLine: {
                        show: false,
                      },
                      itemStyle: {
                        color: "rgba(0,0,0,0)",
                      },
                    },
                  },
                ],
              },
            ],
          };

          myChart.setOption(option);
          /* 大小自适应 */
          window.addEventListener("resize", () => {
            // h = this.$refs.echarts_box.offsetHeight;
            // console.log(h);
            myChart.resize();
          });
          myChart.resize();
        });
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts_box {
  width: 100%;
  height: 100%;
  position: relative;

  .Nodata {
    position: absolute;
    top: 0;
    z-index: 10;
  }
}
</style>